
// 给 登录按钮 添加 点击事件
$('[name="login"]').click(function(){
    window.location.href = `./login.html?url=${window.location.href}`;
  })
  // 给 退出登录按钮 添加点击事件
  $('[name = "tuichu"]').click(function(){
    const cookieObj = myGetCookie();
    if(cookieObj.login === undefined){
        if (window.confirm('您还没有登录 点击确定跳转登录页')) {
            window.location.href = './login.html';
        }
    }else{
        mySetCookie('login', 1, -1, '/');
        window.alert('您已经退出登录');
    }
  })
// 给注册按钮添加事件
  $('[name="register"]').click(function(){
    window.location.href = '../pages/register.html';
  })
  $('[name="cart"]').click(function () {
    // 获取 cookie对象 
    const cookieObj = myGetCookie();

    // 判断有没有登录
    if (cookieObj.login === undefined) {
        // 没有登录 
        if (window.confirm('您还没有登录 点击确定跳转登录页')) {
            window.location.href = './login.html';
        }

    } else {
        // 已经登录 跳转 购物车页面
        window.location.href = './cart.html';
    }
})

const oLi = document.querySelectorAll('.floor>ul>li');
// console.log(oLi);
oLi.forEach(item =>{
    const oH = item.querySelector('h1');
    const urlObj = oH.innerText;
    // console.log(urlObj);
    let page = 1;
    // 默认设定每页显示4条数据
    let line = 4;
    const oBox = item.querySelector('.container');
    // console.log(oBox);
    setPage(urlObj,page,line,oBox);

})


async function setPage(urlObj,page,line,oBox) {
    // 发送 ajax请求
    const response = await myPromiseJQueryAjax('../server/goods_list.php', 'get', { cat_one_id: urlObj, page: page, line: line }, 'json');
    console.log(response.data);

    // 根据 数据结果 动态渲染 生成页面
    
    // 创建ul标签节点
    const oUl = document.createElement('ul');

    // 根据 数组 response.data 生成 4个li
    let liStr = '';
    response.data.forEach(item => {
        
        liStr += `
        <li>
        <ol class="breadcrumb">
          <li><a href="#">${item.cat_one_id}</a></li>
          <li><a href="#">${item.cat_two_id}</a></li>
          <li class="active">${item.cat_three_id}</li>
        </ol>
        <img src="${item.goods_big_logo}"
          alt="...">
        <h3>${item.goods_name}</h3>
        <p>
          <i class="glyphicon glyphicon-yen">价格:</i>
          <span>${item.goods_price}</span>
        </p>
        <p>
          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
          <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
        </p>
        </li>

    `;
    })

    // 写入ul标签节点中
    oUl.innerHTML = liStr;

    // 将 ul标签节点 写入 
    oBox.appendChild(oUl);
}

// 导航栏
$(window).scroll(function(){

  if($(window).scrollTop() > 300 ){
      $('.guanggao').stop().slideDown(500)
      $('.nav').stop().fadeIn(500)
  } else{
     $('.guanggao').stop().slideUp(500)
     $('.nav').stop().fadeOut(500)
  }
 
  $('.floor>ul>li').each(function(key,item){
    
   if($(window).scrollTop() > $(item).offset().top - 400){
     $('.nav>ul>li').removeClass('active').eq(key).addClass('active');
   }
  })

})
// 导航栏点击
$('.nav>ul>li').click(function(e){
if($(e.target).attr('name') === 'back'){
//  console.log(666);
 $('html').animate({ scrollTop : 0},1000) 
}else if($(e.target).attr('name') === "other"){
 $('html').animate({scrollTop:$('.floor>ul>li').eq($(e.target).index()).offset().top  - 100  },1000)
}
})

// 轮播图

const arr = [{url:'../message/1.jpg'},
             {url:'../message/4.jpg'},
             {url:'../message/3.jpg'},
             {url:'../message/7.jpg'},
             {url:'../message/8.jpg'}]
let oDiv;
let oUl;
let oOl;
let oBox;
let ulLis;
let olLis;
let liwidth;
let index = 1;
let time = 0 ;
let res = true;


// 动态生成
setPageloop();
slideshow();
btnClick();
mouse();
browserListening();


function setPageloop(){

oDiv = document.querySelector('.right');
// console.log(oDiv);
  // 新建节点
oUl = document.createElement('ul');
oOl = document.createElement('ol');
oBox = document.createElement('div')
// console.log(oUl);
let olstr = '';
let ulStr = '';
// 循环遍历节点
arr.forEach(function(item,key){
  ulStr += `
  <li><img src=${item.url} alt=""></li>
  ` 
  olstr += key === 0 ? `<li name = 'ol' class = "act" num = ${key}>` : `<li name = 'ol' num = ${key}>`;

})
// 写入内容
oOl.innerHTML = olstr ;
oUl.innerHTML = ulStr;
oBox.innerHTML = '<a   href="JavaScript:;"><span name="left" class="iconfont icon-xiangzuofanye"></span></a><a  href="JavaScript:;"><span name="right" class="iconfont icon-xiangyoufanye"></span></a>';
// console.log(oBox);
// 插入节点
oDiv.appendChild(oUl);
oDiv.appendChild(oOl);
oDiv.appendChild(oBox);
// 获取li
ulLis = oUl.querySelectorAll('li');
olLis = oOl.querySelectorAll('li');
// console.log(olLis);
// 克隆节点
const fli =  ulLis[0].cloneNode(true);
const lli = ulLis[arr.length-1].cloneNode(true);
oUl.appendChild(fli);
oUl.insertBefore(lli,ulLis[0]);
liwidth = ulLis[0].offsetWidth;
oUl.style.left = -liwidth +'px';
oUl.style.width  = (arr.length+2)*liwidth + 'px';
}
// move 运动函数
function slideshow(){
  time = setInterval(function(){
    if(res){
      res = false
    }else{
      return;
    }
      index++;
      getFocus();
      move(oUl,{left:-liwidth*index},circulation)
  },3000)
}
// 图片运动
function circulation(){
  if(index === arr.length + 2 - 1){
    index = 1
  }else if(index === 0){
    index = arr.length + 2 -2
  }
  oUl.style.left = -index*liwidth + 'px';
  res = true;
}

// 焦点原点切换
function getFocus(){
// 清除所有样式
  olLis.forEach(function(item){
    item.classList.remove('act');
  })
// console.log(olLis);
  if(index === 0 ){
    olLis[arr.length -1].classList.add('act');
  }else if (index === arr.length + 2 - 1){
    olLis[0].classList.add('act');
  }else{
    olLis[index - 1].classList.add('act');
  }
}

// 点击事件
function btnClick(){
  oDiv.addEventListener('click',function(e){
    if($(e.target).attr('name') === 'left'){
      if(res){
        res = false
      }else{
        return;
      }
      // console.log(11);
      index --;
      getFocus();
      move(oUl,{left:-liwidth*index},circulation);
    }else if($(e.target).attr('name') === 'right'){
      // console.log(22);
      if(res){
        res = false
      }else{
        return;
      }
      index ++;
      getFocus();
      move(oUl,{left:-liwidth*index},circulation);
    }else if($(e.target).attr('name') === 'ol'){
      if(res){
        res = false
      }else{
        return;
      }
      index = Number($(e.target).attr('num'))+1;
      getFocus();
      move(oUl,{left:-liwidth*index},circulation);
    }
  })
}
// 鼠标移入移出
function mouse(){
  $('.right').hover(function(){
    clearInterval(time);
  },function(){
    slideshow();
  })
}
//浏览器最小化
function browserListening(){
  document.addEventListener('visibilitychange',function(){

      // 窗口隐藏
      if(document.visibilityState === "hidden"){
        clearInterval(time);

      // 窗口显现
      }else if(document.visibilityState === "visible"){
          slideshow();
      }
  })
}













// 瀑布流